<template>
  <el-form ref="formRef" label-width="100px" size="mini">
    <el-form-item>
      <p>基础配置</p>
    </el-form-item>
    <el-form-item required label="业务名称：">
      <el-input v-model="basicFormData.name" placeholder="请输入" maxlength="10" @input="(e) => {handleInput(e,'name')}" />
    </el-form-item>
    <el-form-item required label="业务类型：">
      <el-select v-model="basicFormData.businessType" placeholder="请选择" @change="(e) => {handleInput(e, 'businessType')}">
        <el-option
          v-for="item in businessTypeList"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        />
      </el-select>
    </el-form-item>
    <el-form-item required label="数据系统：">
      <CheckBoxGroupView
        v-model="basicFormData.dateSystemIds"
        :option-list="exploitSystemList"
        @change="(e) => {handleInput(e, 'dateSystemIds')}"
      />
    </el-form-item>

    <el-form-item required label="业务级别：">
      <el-select v-model="basicFormData.businessLevel" placeholder="请选择" @change="(e) => {handleInput(e, 'businessLevel')}">
        <el-option
          v-for="item in businessLevelMap"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        />
      </el-select>
    </el-form-item>

    <el-form-item required label="考核指标：">
      <SelectTree v-model="basicFormData.businessKpiParams" :option-list="treeKpiData" @change="(e) => {handleInput(e, 'businessKpiParams')}" />
    </el-form-item>

    <el-form-item label="关联指标：">
      <SelectTree v-model="basicFormData.associatedBusinessKpiParams" :option-list="treeKpiData" @change="(e) => {handleInput(e, 'associatedBusinessKpiParams')}" />
    </el-form-item>
  </el-form>
</template>

<script>
import { businessLevelMap } from '@/config/dict'
import { fetchDropDictionaryList } from '@/api/commonDropDown'
import { fetchCommonTreeKpi } from '@/api/commonTree'
import SelectTree from '@/components/SelectTree'
import CheckBoxGroupView from '@/components/CheckBoxGroupView/index'
import { isValid, isValidArray } from '@/utils'

export default {
  name: 'BasicForm',
  components: { SelectTree, CheckBoxGroupView },
  data() {
    return {

      treeSelect: [],
      businessTypeList: [], // 业务类型候选集合
      treeKpiData: [], // 考核指标候选集合
      businessLevelMap, // 业务级别候选集合
      exploitSystemList: [] // 数据系统候选集合

    }
  },
  computed: {
    basicFormData: function() {
      return this.$store.state.businessFormData.basicForm.data || {}
    }

  },
  watch: {
    basicFormData: {
      handler: function(val = {}, oldVal = {}) {
        if (val.dateSystemIds.length > 0 && val.dateSystemIds.length !== oldVal.dateSystemIds) {
          this.postTreeKpi(val.dateSystemIds)
        }

        this.checkStatus(val, oldVal)
      },
      immediate: true
    }
  },

  mounted() {
    this.postBusinessType()
    this.postDataSystemList()
  },
  methods: {
    handleInput(e, type) {
      const basicFormData = this.$store.state.businessFormData.basicForm.data || {}
      const data = { ...basicFormData, [type]: e }

      this.$store.dispatch('businessFormData/setBasicFormData', { data })
    },
    checkStatus(val, oldVal) {
      let status = true
      const errMsg = []
      if (!isValid(val.name)) {
        errMsg.push('请输入业务名称')
        status = false
      }
      if (!isValid(val.businessType)) {
        errMsg.push('请选择业务类型')
        status = false
      }
      if (!isValidArray(val.dateSystemIds)) {
        errMsg.push('请选择数据系统')
        status = false
      }
      if (!isValid(val.businessLevel)) {
        errMsg.push('请选择业务级别')
        status = false
      }
      if (!isValidArray(val.businessKpiParams)) {
        errMsg.push('请选择考核指标')
        status = false
      }

      const oldErrMsg = this.$store.state.businessFormData.basicForm.errMsg
      if (JSON.stringify(oldErrMsg) !== JSON.stringify(errMsg)) {
        this.$store.dispatch('businessFormData/setBasicFormData', { status, errMsg })
      }
    },
    getFormData() {
      return new Promise((resolve, reject) => {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            resolve(this.$data.formData)
          } else {
            reject()
          }
        })
      })
    },
    postBusinessType() {
      fetchDropDictionaryList({ groupName: '业务类型' }).then(res => {
        this.$data.businessTypeList = res.map(e => ({ key: e.id, value: e.name }))
      })
    },
    postDataSystemList() {
      fetchDropDictionaryList({ groupName: '数据系统' }).then(res => {
        this.$data.exploitSystemList = res.map(e => ({ key: e.id, value: e.name }))
      })
    },
    postTreeKpi(list = []) {
      const params = { dataSystemIds: list }
      fetchCommonTreeKpi(params).then(res => {
        this.$data.treeKpiData = this.formatTree(res)
      })
    },
    formatTree(tree = []) {
      return tree.map(e => {
        e.label = e.name

        if (e.childTree) {
          e.children = this.formatTree(e.childTree)
        }
        return e
      })
    }

  }

}
</script>

<style>

</style>
